diff options
Diffstat (limited to 'src/app/kdrama/[id]')
| -rw-r--r-- | src/app/kdrama/[id]/buttons.jsx | 19 | ||||
| -rw-r--r-- | src/app/kdrama/[id]/page.jsx | 10 |
2 files changed, 12 insertions, 17 deletions
diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx index 9f6145c..2018a1c 100644 --- a/src/app/kdrama/[id]/buttons.jsx +++ b/src/app/kdrama/[id]/buttons.jsx @@ -1,23 +1,21 @@ "use client";
import styles from "../styles/info.module.css";
import getVideoLink from "../components/videoLink";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
import { MediaPlayer, MediaProvider } from "@vidstack/react";
-import "@vidstack/react/player/styles/base.css";
-import "@vidstack/react/player/styles/plyr/theme.css";
+import "@vidstack/react/player/styles/default/theme.css";
+import "@vidstack/react/player/styles/default/layouts/video.css";
import {
- PlyrLayout,
- plyrLayoutIcons,
-} from "@vidstack/react/player/layouts/plyr";
+ defaultLayoutIcons,
+ DefaultVideoLayout,
+} from "@vidstack/react/player/layouts/default";
export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
const [videoLink, setVideoLink] = useState(null);
- const [episode, setEpisode] = useState("");
async function test(a, b, episodeText) {
let link = await getVideoLink(a, b);
setVideoLink(link);
- setEpisode(episodeText);
}
return (
@@ -32,7 +30,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) { onClick={(event) => {
test(item.id, dramaId, item.title);
event.currentTarget.style.backgroundColor =
- "var(--soft-purple)";
+ "#D08770";
}}
>
<p>{item.title}</p>
@@ -55,7 +53,6 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) { <MediaPlayer
title="dramaPlayer"
src={videoLink}
- aspectRatio="16/9"
load="eager"
className={styles.VideoPlayer}
playsInline
@@ -63,7 +60,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) { volume={0.8}
>
<MediaProvider />
- <PlyrLayout icons={plyrLayoutIcons} />
+ <DefaultVideoLayout icons={defaultLayoutIcons} />
</MediaPlayer>
<button
className={styles.closeButton}
diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx index 69a42c2..38593e7 100644 --- a/src/app/kdrama/[id]/page.jsx +++ b/src/app/kdrama/[id]/page.jsx @@ -3,6 +3,8 @@ import Image from "next/image"; import EpisodesButtons from "./buttons";
import { PreFetchVideoLinks } from "../components/cacher";
+export const runtime = "edge";
+
export default async function DramaInfo({ params }) {
const id = decodeURIComponent(params.id);
const info = await getDramaInfo(id);
@@ -35,9 +37,7 @@ export default async function DramaInfo({ params }) { <span className={styles.genreMain}>Genres: </span>
{info.genres &&
info.genres.map((item, index) => (
- <span key={index} className={styles.genreEntry}>
- {item}
- </span>
+ <p key={index}>{item}</p>
))}
</div>
@@ -46,9 +46,7 @@ export default async function DramaInfo({ params }) { <span className={styles.genreMain}>AKA: </span>
{info.otherNames &&
info.otherNames.map((item, index) => (
- <span key={index} className={styles.genreEntry}>
- {item}
- </span>
+ <p key={index}>{item}</p>
))}
</div>
|